<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/jquery-1.10.1.min.js"></script>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .box {

      width: 200px;
      height: 200px;
      background-color: #6ff;
      margin: 20px;
    }
  </style>
</head>

<body>
  <div class="box"></div>

</body>
<script>
  // $(".box").click(function () {
  //   $(this).css({ background: "red" })
  // })

  // $(".box").mousedown(function (e) {
  //   console.log(e);
  //   e.stopPropagation(); //=>停止传播
  //   e.preventDefault();
  //   $(this).css({ background: "red" })

  // })

  // $(".box").mouseenter(function () {
  //   $(this).css({ background: "red" })
  // }).mouseleave(function () {
  //   $(this).css({ background: "yellow" })

  // })

  // $(".box").hover(function () {
  //   $(this).css({ background: "red" })

  // }, function () {
  //   $(this).css({ background: "yellow" })

  // })

  console.log("------------------------------------------------------------");

  // GetEle.prototype.click = function (fn) {
  //   this.on("click", fn)
  // }

  // jquery中绑定事件的方法  on   (所有的事件都是基于on方法二次封装 实现的)
  // $(ele).on(eventType,data,callback)    普通绑定
  // ele        绑定事件的元素 (获取的元素)
  // eventType  绑定的事件类型
  // data       事件触发时携带的数据(可写可不写)
  // callback   事件触发时执行的回调函数

  // $(".box").click(function () {
  //   $(this).css({ background: "red" })
  // })

  // $(".box").on("click", { a: 1, b: 2 }, function (e) {
  //   console.log(e.data);
  // })

  // $(".box").on("mouseenter", function (e) {
  //   console.log("冲波划过...");
  // })

  // $(".box").on("mousedown", function (e) {
  //   console.log(e.button);
  // })

  // jquery中清除绑定事件的方法  off  
  // $(ele).off(eventType,callback)    
  // ele        绑定事件的元素 (获取的元素)
  // eventType  绑定的事件类型
  // callback   事件触发时执行的回调函数

  function clickHandler_1() {
    $(this).css({ background: "red" })
  }
  function clickHandler_2(e) {
    console.log(e.data);
  }
  function mouseenterHandler(e) {
    console.log("鼠标滑过....");
  }
  function mousedownHandler(e) {
    console.log(e.button);
  }

  $(".box").click(clickHandler_1);
  $(".box").on("click", { a: 1, b: 2 }, clickHandler_2);
  $(".box").on("mouseenter", mouseenterHandler);
  $(".box").on("mousedown", mousedownHandler);

  // $(".box").off("click", clickHandler_1);
  // $(".box").off("click", clickHandler_2);
  // $(".box").off("mouseenter", mouseenterHandler);
  // $(".box").off("mousedown", mousedownHandler);

  // (2)  清除同种类型的事件
  // $(".box").off("click");


  // (3) 清除匹配元素上所有类型的事件
  // $(".box").off();
</script>

</html>